<template>
  <el-row>
      <el-col :span="24">
          <h1>用户管理&nbsp;>&nbsp;新增｜编辑用户</h1>
      </el-col>
  </el-row>
  <el-form
      label-position="right"
      label-width="auto"
      ref="formEleRef"
      :model="item"
      :rules="rules"
      style="max-width: 600px">
    <el-form-item label="姓名：" prop="name">
      <el-input v-model="item.name" />
    </el-form-item>
    <el-form-item label="登录名：" prop="loginName">
      <el-input v-model="item.loginName" />
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input v-model="item.password" show-password autocomplete="off" show-word-limit />
    </el-form-item>
    <el-form-item label="确认密码：" prop="passwordR">
      <el-input v-model="item.passwordR" show-password autocomplete="off" show-word-limit />
    </el-form-item>
    <el-form-item label="手机号："  prop="mobile">
      <el-input v-model="item.mobile" />
    </el-form-item>
    <el-form-item label="邮箱：" prop="email">
      <el-input v-model="item.email" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSave()">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue'
import {ElMessage} from "element-plus"

let storeItem=ref(null)

export default{
  emits:["onCancel"],
  props:["item"],
  mounted(){
    console.log("组件创挂完成")
    storeItem = ref(this.item);
  },
  data(){
    return {
      rules:{
        name:[
          {required: true, message:'请输入名字', trigger:'blur'},
          {min: 2, max:64, message:'长度必须在2-64之间', trigger:'blur'}
        ],
        loginName:[
          {required: true, message:'请输入登录名', trigger:'blur'},
          {validator:function(r,v,c){
            let reg = /^[a-z0-9A-Z]{6,16}$/
            if(!reg.test(v)){
              c(new Error('登录名只支持英文和数字，且不能少于6个字符'))
            }else{
              c()
            }
          }, trigger:'blur'}
        ],
        password:[
          {validator: function(r,v,c){
            let reg= /^\w{6,18}$/;
            if(!reg.test(v)){
              c(new Error('密码只支持英文和数字，长度为6-18位！'))
            }else{
              c()
            }
          }, trigger: 'blur' }
        ],
        passwordR:[
          {validator: function(r,v,c){
            //console.log("Variable [item.password] -> "  + formEleRef.value.password);
            if(v !==storeItem.value.password){
              c(new Error('两次输入的密码不一致'))
            }else{
              c()
            }
          }, trigger: 'blur'}
        ],
        mobile:[
        {required: true, message:'请输入手机号', trigger:'blur'},
          {validator:function(r,v,c){
            if(v!==null && v.length>0){
              let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
              if(!reg.test(v)){
                c(new Error('请输入有效的手机号！'))
              }else{
                c()
              }
            }else{
              c()
            }
          }, trigger: ['blur', 'change']}
        ],
        email:[
          {type: 'email', message: "请输入有效的电子邮件地址", trigger: ['blur', 'change']}
        ]
      }
    }
  },
  methods: {
    onSave(){
      //if (!formInt) return;
      let form = this.$refs.formEleRef;
      if(!form){
        return;
      }
      form.validate((valid) => {
        if (valid) {
          //{"name":"zhaofeng","loginName":"zhaofeng","password":"pass1234","mobile":"15118810197","email":"442526654@qq.com"}
          ///iotshudt-web/admin/account/save
          let saveForm = {
            name: storeItem.value.name,
            loginName: storeItem.value.loginName,
            password: storeItem.value.password,
            mobile: storeItem.value.mobile,
            email: storeItem.value.email
          }
          console.log("Variable [saveForm] -> " + JSON.stringify(saveForm))
          this.axios.post("/backend/admin/account/save",saveForm).then((r)=>{
            if(r.status === 200 && r.data.status === 200){
              ElMessage({
                  message:"用户保存成功",
                  type:"success",
                  duration:3000
              })
              this.$emit("onCancel",true)
            }else{
              ElMessage({
                  message: r.data.message,
                  type:"error",
                  duration:3000
              });
            }
          })
        }
      })
    },
    onCancel(){
      this.$emit("onCancel",true)
    }
  }
}
</script>